<!-- 高级表单 -->
<template>
	<div class="root">
		<el-card class="card">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<lilo-advanced-data-form ref="advancedDataForm" :data-provider="dataProvider" :templates="formTemplates" :rules="formRules"></lilo-advanced-data-form>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<el-button type="success" @click="getRefs">getRefs</el-button>
				<el-button type="primary" @click="submit">SUBMIT</el-button>
				<el-button type="danger" @click="reset">RESET</el-button>
			</el-col>
		</el-card>
	</div>
</template>

<script>
import _ from 'lodash';

let ceshiCascaderId = 0;

export default {
	name: 'example-advanced-data-form',
	data() {
		let validateTest = (rule, value, callback) => {
			if (value.length === 2) {
				callback();
			} else {
				callback('请输入正确的值');
			}
		};
		let validateJine = (rule, value, callback) => {
			if (!isNaN(value)) {
				callback();
			} else {
				callback('请输入数字');
			}
		};
		return {
			dataProvider: {
				ceshiAvatar:
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660295061&t=432f1167c41dc179d860741b967fe027',
				// ceshiAvatar: 'http://10.34.5.66:5000/sysFileInfo/download?Id=309402896838981',
				xm: '刘一波',
				phone: '',
				zjhm: '420102198807081234',
				hsjcjg: '阴性',
				hsjcsj: '',
				hsjcjgmc: '3',
				ceshiSelect: '2',
				ceshiRadio: '1',
				ceshiCheckBox: true,
				ceshiCheckBoxGroup: ['0', '1'],
				ceshiInputNumber: 6,
				ceshiCascader: [1, 2, 5],
				ceshiGroupSelect: 't3',
				ceshiGroupSelect2: ['Shanghai', 'Beijing'],
				jine: 123456789,
				ceshiSwitch: true,
				ceshiSlider: 10,
				ceshiRate: 4,
				ceshiColorPicker: 'rgba(30, 144, 255, 1)',
				ceshiUpload: [
					{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
					{
						name: 'pic3.jpeg',
						url:
							''
					},
					{
						name: '大白走路.gif',
						url:
							'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015dea5b796b7ea80120d8c00865ec.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659580925&t=979dd08bf4ac5858511b74d3f00d7aef'
					}
				],
				ceshiTextarea:
					'elemetUi 组件--el-upload实现上传Excel文件的实例 【需求】实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断。 【知识点】',
				ceshiTable: [
					{ id: '0', name: '张三', age: 35, sex: '1', isShare: true, mark: '的升级附加赛飞机喀什地方就开始雕刻技法' },
					{
						id: '1',
						name: '王五',
						age: 32,
						sex: '0',
						isShare: false,
						mark:
							'的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法的升级附加赛飞机喀什地方就开始雕刻技法'
					},
					{ id: '2', name: '李四', age: 31, sex: '0', isShare: true, mark: '的升级附加赛飞机喀什地方就开始雕刻技法' }
				]
			},
			formRules: {
				xm: [{ required: true, message: '请输入姓名', trigger: 'blur' }, { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }],
				phone: [
					{ required: true, message: '请输入手机号', trigger: 'change' },
					{ pattern: /^((0\d{2,3}-\d{7,8})|(1\d{10})|\d{7,8})$/, message: '请输入正确的号码', trigger: 'change' }
				],
				hsjcjg: [{ required: true, validator: validateTest }],
				jine: [{ required: true, validator: validateJine }]
			},
			formTemplates: [
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					component: {
						name: 'Divider',
						label: '测试分类一'
					}
				},
				{
					layout: { xs: 24, sm: 8, md: 8, lg: 8, xl: 8 },
					field: 'ceshiAvatar',
					// label: '测试头像',
					// labelWidth: '0px',
					component: {
						name: 'Avatar',
						change: this.avatarChange
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'xm',
					label: '姓名',
					placeholder: '请输入姓名',
					disabled: false
					// clearable: true
					// component: {
					// name: 'Input',
					// clearable: true,
					// placeholder: '请输入姓名',
					// disabled: true
					// }
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'phone',
					label: '手机号',
					component: {
						name: 'Input',
						placeholder: '请输入手机号',
						input: value => {
							console.log(value);
						},
						clearable: () => {
							return true
						},
						disabled: () => {
							return this.dataProvider.ceshiSlider <= 10
						}
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'zjhm',
					label: '后置插槽',
					slotName: 'append', // prepend, append, prefix, suffix
					// slotContent: '<span style="color:red">.com</span>'
					slotContent: '<el-button type="primary">.com</el-button>'
					// component: {
					// name: 'Input',
					// clearable: true,
					// disabled: true
					// }
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'hsjcjg',
					label: '前置插槽',
					component: {
						name: 'Input',
						clearable: true,
						// disabled: true
						slotName: 'prepend', // prepend, append, prefix, suffix
						slotContent: '<span style="color:blue">OK</span>'
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'hsjcsj',
					label: '时间区间',
					component: {
						name: 'DatePicker',
						type: 'daterange' //year/month/date/dates/week/datetime/datetimerange/daterange/monthrange
						// clearable: false
						// disabled: true
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'hsjcjgmc',
					label: '下拉框',
					component: {
						name: 'Select',
						// clearable: false,
						// disabled: true,
						multiple: true,
						change: this.handleSelectChange,
						optionKey: 'type', //默认值为value
						optionLabel: 'name', //默认值为label
						options: [
							{
								type: '1',
								name: '武汉市第六医院'
							},
							{
								type: '2',
								name: '武汉市同济医院'
							},
							{
								type: '3',
								name: '武汉市协和医院'
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiSelect',
					label: '有搜索下拉框',
					component: {
						name: 'Select',
						clearable: true,
						// disabled: true,
						filterable: true,
						// filterMethod: this.selectFilterMethod,
						change: this.handleSelectChange,
						optionKey: 'type', //默认值为value
						optionLabel: 'name', //默认值为label
						options: [
							{
								type: '1',
								name: '六医院'
							},
							{
								type: '2',
								name: '同济医院'
							},
							{
								type: '3',
								name: '协和医院'
							},
							{
								type: '4',
								name: '长航医院'
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiRadio',
					label: '测试单选框',
					component: {
						name: 'Radio',
						// disabled: true,
						options: [
							{
								value: '0',
								label: '选择一'
							},
							{
								value: '1',
								label: '选择二'
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiCheckBox',
					label: '测试多选框',
					component: {
						name: 'CheckBox'
						// disabled: true
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiCheckBoxGroup',
					label: '测试多选框组',
					component: {
						name: 'CheckBoxGroup',
						// disabled: true,
						options: [
							{
								value: '0',
								label: '多选一'
							},
							{
								value: '1',
								label: '多选二'
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiInputNumber',
					label: '测试计数器',
					component: {
						name: 'InputNumber',
						// disabled: true,
						controlsPosition: 'right',
						min: 0,
						max: 10,
						step: 1
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiCascader',
					label: '级联选择框',
					component: {
						name: 'Cascader',
						// clearable: false,
						// disabled: true,
						props: {
							lazy: true,
							lazyLoad: this.lazyLoad
						}
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiGroupSelect',
					label: '单选下拉框组',
					component: {
						name: 'GroupSelect',
						// clearable: false,
						// disabled: true,
						multiple: false,
						options: [
							{
								id: 1,
								label: '按天',
								options: [
									{
										value: 't1',
										label: '1天'
									},
									{
										value: 't2',
										label: '2天'
									},
									{
										value: 't3',
										label: '3天'
									},
									{
										value: 't4',
										label: '4天'
									},
									{
										value: 't5',
										label: '5天'
									}
								]
							},
							{
								id: 2,
								label: '按小时',
								options: [
									{
										value: 'h1',
										label: '1小时'
									},
									{
										value: 'h2',
										label: '2小时'
									},
									{
										value: 'h3',
										label: '3小时'
									},
									{
										value: 'h4',
										label: '4小时'
									},
									{
										value: 'h5',
										label: '5小时'
									}
								]
							}
						],
						change: val => {
							console.log(val);
						}
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiGroupSelect2',
					label: '多选下拉框组',
					component: {
						name: 'GroupSelect',
						// clearable: false,
						// disabled: true,
						multiple: true,
						options: [
							{
								id: 1,
								label: '热门城市',
								checked: false,
								isIndeterminate: false,
								options: [
									{
										value: 'Shanghai',
										label: '上海'
									},
									{
										value: 'Beijing',
										label: '北京'
									}
								]
							},
							{
								id: 2,
								label: '城市名',
								checked: false,
								isIndeterminate: false,
								options: [
									{
										value: 'Chengdu',
										label: '成都'
									},
									{
										value: 'Shenzhen',
										label: '深圳'
									},
									{
										value: 'Guangzhou',
										label: '广州'
									},
									{
										value: 'Dalian',
										label: '大连'
									},
									{
										value: 'Huizhou',
										label: '惠州'
									}
								]
							}
						],
						change: val => {
							console.log(val);
						}
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					// label: '测试标题',
					labelWidth: '0px',
					component: {
						name: 'Template',
						templates: [
							{
								name: 'Button',
								label: '查询',
								type: 'primary',
								icon: 'el-icon-search',
								click: this.templateButtonQuery,
								validator() {
									return true;
								}
							},
							{
								name: 'Button',
								label: '重置',
								// type: 'success',
								icon: 'el-icon-refresh-right',
								click: this.templateButtonReset
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					component: {
						name: 'Divider',
						label: '附件上传'
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'jine',
					label: '金额(万元)',
					component: {
						name: 'ThounsandInput',
						placeholder: '请输入金额',
						input: value => {
							console.log(value);
						}
						// clearable: true,
						// disabled: true
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiSwitch',
					label: '测试开关',
					component: {
						name: 'Switch',
						// disabled: true,
						activeValue: '1',
						inactiveValue: '0',
						activeText: '是',
						inactiveText: '否',
						activeColor: '#1890ff',
						inactiveColor: '#ff4949'
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiSlider',
					label: '测试滑块',
					component: {
						name: 'Slider',
						// disabled: true,
						min: 0,
						max: 100,
						step: 1
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiRate',
					label: '测试评分',
					component: {
						name: 'Rate',
						// disabled: true,
						showText: true,
						texts: ['F级', 'D级', 'C级', 'B级', 'A级']
					}
				},
				{
					layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
					field: 'ceshiColorPicker',
					label: '颜色选择器',
					component: {
						name: 'ColorPicker',
						showAlpha: true,
						// disabled: true,
						predefineColors: [
							'#ff4500',
							'#ff8c00',
							'#ffd700',
							'#90ee90',
							'#00ced1',
							'#1e90ff',
							'#c71585',
							'rgba(255, 69, 0, 0.68)',
							'rgb(255, 120, 0)',
							'hsv(51, 100, 98)',
							'hsva(120, 40, 94, 0.5)',
							'hsl(181, 100%, 37%)',
							'hsla(209, 100%, 56%, 0.73)',
							'#c7158577'
						]
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					component: {
						name: 'Divider',
						label: '附件上传',
						info: '测试文本信息',
						templates: [
							{
								name: 'Button',
								label: '右侧插槽',
								type: 'primary',
								// icon: 'el-icon-search',
								round: false,
								click: this.templateDividerButtonTest
							},
							{
								name: 'Button',
								label: '右侧插槽',
								type: 'success',
								icon: 'el-icon-search',
								round: false,
								click: this.templateDividerButtonTest
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					field: 'ceshiUpload',
					label: '测试图片上传',
					component: {
						name: 'Upload',
						// disabled: true,
						multiple: true, //是否多选，默认为true
						limit: 6,
						// accept: '.jpg, .jpeg, .png, .gif, .webp',
						size: 4 ,//mb
						// totalSize: 4//mb
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					field: 'ceshiTextarea',
					label: '测试长文本域',
					component: {
						name: 'Input',
						type: 'textarea',
						maxlength: 300,
						autoSize: {
							minRows: 4,
							maxRows: 10
						}
						// disabled: true
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					field: 'ceshiTable',
					label: '附件列表',
					// labelWidth: '0px',
					component: {
						name: 'Table',
						checked: true,
						checkedKey: 'id',
						checkedDisabled: false,
						showSummary: true,
						sumText: '文本', //默认为合计
						watermark: () => {
							return this.$store.getters.account;
						},
						stripe: false, //设置rowStyle之前禁用斑马纹
						rowStyle: ({ row, rowIndex }) => {
							if(rowIndex === 1) {
								return {
									backgroundColor: 'rgba(255,0,0,0.2)'
								}
							}
						},
						// height: 200,
						columns: [
							{
								field: 'name',
								label: '姓名',
								width: 80
							},
							{
								field: 'age',
								label: '年龄',
								width: 80,
								sortable: true,
								templates: [
									{
										click: this.handleClick2,
										tooltip: {
											// contentField: 'bt', //默认为content
											placement: 'top',
											effect: 'dark',
											textFormatter: (row, col, template) => {
												// return row[template.tooltip.contentField]
												return '性名：' + row.name + '<br/>' + '年龄：' + row.age + '<br/>' + '性别：' + row.sex;
											}
										},
										styleFormatter: row => {
											return { color: '#d50000', cursor: 'pointer', fontWeight: 'bold' };
										},
										textFormatter: row => {
											return row.age;
										}
									}
								]
							},
							{
								field: 'sex',
								label: '性别',
								width: 80,
								formatter: this.sexFormatter
							},
							{
								field: 'mark',
								label: '备注'
							},
							{
								field: 'isShare',
								label: '共享',
								width: 100,
								templates: [
									{
										name: 'Switch',
										// disabled: true,
										activeValue: '1',
										inactiveValue: '0',
										activeText: '是',
										inactiveText: '否',
										activeColor: '#1890ff',
										inactiveColor: '#ff4949',
										validator: row => {
											return row.sex === '0';
										},
										change: this.templateTableColumnSwitchChange
									}
								]
							},
							{
								label: '操作',
								width: 160,
								headers: [
									{
										name: 'Button',
										label: '上传',
										type: 'danger',
										icon: 'el-icon-upload',
										click: this.templateTableHeaderButtonUpload
									}
									// {
									// 	name: 'Button',
									// 	label: '新增',
									// 	type: 'success',
									// 	icon: 'el-icon-circle-plus-outline',
									// 	click: this.templateTableButtonDetails
									// }
								],
								templates: [
									{
										name: 'Button',
										label: '编辑',
										type: 'primary',
										// icon: 'el-icon-search',
										click: this.templateTableColumnButtonEdit
									},
									{
										name: 'Button',
										label: '详情',
										type: 'success',
										icon: 'el-icon-search',
										click: this.templateTableColumnButtonDetails
									}
								]
							}
						]
					}
				},
				{
					layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
					// label: '测试标题',
					labelWidth: '150px',
					component: {
						name: 'Template',
						templates: [
							{
								name: 'Button',
								label: '获取Table勾选结果',
								type: 'primary',
								icon: 'el-icon-check',
								click: this.templateButtonGetTableSelection
							}
						]
					}
				}
			]
		};
	},
	methods: {
		avatarChange(file) {
			console.log(file);
			// 追加FormData参数
			// let fd = this.$refs.advancedDataForm.getFormData();
			// fd.append('files', file);
			// console.log(fd);
		},
		lazyLoad(node, resolve) {
			const { level } = node;
			setTimeout(() => {
				const nodes = Array.from({ length: level + 1 }).map(item => ({
					value: ++ceshiCascaderId,
					label: `选项${ceshiCascaderId}`,
					leaf: level >= 2
				}));
				// 通过调用resolve将子节点数据返回，通知组件数据加载完成
				resolve(nodes);
			}, 1000);
		},
		sexFormatter(dp, row, col) {
			if (row[col.field] === '0') {
				return '女';
			} else {
				return '男';
			}
		},
		handleSelectChange(value) {
			console.log(value);
		},
		selectFilterMethod() {},
		templateDividerButtonTest(item, template) {
			console.log(item);
			console.log(template);
		},
		templateTableColumnSwitchChange(check, row) {
			console.log(check);
			console.log(row);
		},
		templateTableHeaderButtonUpload(scope, header) {
			console.log(scope);
			console.log(header);
		},
		templateTableColumnButtonEdit(row) {
			console.log(row);
		},
		templateTableColumnButtonDetails(row) {
			console.log(row);
		},
		templateButtonQuery(item, template) {
			this._submit_();
		},
		templateButtonGetTableSelection(item, template) {
			//测试获取勾选结果
			const selectedRows = this.$refs.advancedDataForm.getSelectedRows();
			const selectedKeys = this.$refs.advancedDataForm.getSelectedKeys();
			console.log(selectedRows);
			console.log(selectedKeys);
		},
		templateButtonReset(item, template) {
			this._reset_();
		},
		getRefs() {
			const $ceshiCascader = this.$refs.advancedDataForm.getRefs('ceshiCascader');
			console.log($ceshiCascader);
			const nodes = $ceshiCascader.getCheckedNodes();
			console.log(nodes);
			let values = nodes[0].path;
			let labels = nodes[0].pathLabels;
			console.log(values);
			console.log(labels);

			const $ceshiUpload = this.$refs.advancedDataForm.getRefs('ceshiUpload');
			console.log($ceshiUpload);

			const $ceshiTable = this.$refs.advancedDataForm.getRefs('ceshiTable');
			console.log($ceshiTable);
		},
		submit: _.debounce(function() {
			this._submit_();
		}, 300),
		reset() {
			this._reset_();
		},
		_submit_() {
			console.log(this.dataProvider);

			this.$refs.advancedDataForm.validate(valid => {
				console.log(valid);
				if (valid) {
				}
			});
		},
		_reset_() {
			this.$refs.advancedDataForm.resetFields();
		}
	}
};

//
//API demo
//
// 动态设置Select模板的options内容
// this.$refs.advancedDataForm.setSelectOptions('hsjcjgmc', [
// 	{
// 		value: '选项111',
// 		label: '哈哈哈'
// 	}
// ]);
</script>

<style lang="scss">
.root {
	padding: 10px;
	.card {
		height: calc(100vh - 110px);
		overflow-y: auto;
	}
}
</style>
